<template>
	<view class="content">
		<image class="banner-list" src="/static/image/mine/banner.png" mode=""></image>
		<view class="banner-top">
			<view class="banner-top-title flex">
				<image style="margin-right: 20rpx;" src="/static/image/mine/left.png" mode=""></image>
				<view class="">成为分销商</view>
				<image style="margin-left: 20rpx;" src="/static/image/mine/right.png" mode=""></image>
			</view>
			<view class="content-input-box flex justify-between">
				<view class="content-input-box-name">
					姓名
				</view>
				<input type="text" placeholder="请输入姓名" />
			</view>
			<view class="content-input-box flex justify-between">
				<view class="content-input-box-name">
					手机号
				</view>
				<input type="text" placeholder="请输入手机号" />
			</view>
			<view class="content-input-btn" @click="subMit">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 提交申请
			subMit(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '申请成为分销商需要推荐人数达到50人您目前还不满足此条件，无法申请',
					confirmColor:"#000000",
					cancelColor:"#999999",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$helper.to('/pages/views/managementEdit/managementSuccess')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-list {
		width: 100%;
		height: 322rpx;
	}

	.banner-top {
		width: 690rpx;
		height: 470rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		margin-top: 50rpx;
		border-radius: 10rpx;
		.banner-top-title {
			width: 300rpx;
			margin: 0 auto;
			align-items: center;

			image {
				width: 44rpx;
				height: 16rpx;
				margin-top: 4rpx;
			}
		}
		.content-input-box {
			width: 100%;
			height: 80rpx;
			border-bottom: 1rpx solid #EFEFEF;
			align-items: center;
			margin-bottom: 20rpx;
			.content-input-box-name {
				width: 20%;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			
			input {
				width: 70%;
				height: 80rpx;
				text-align: right;
				font-weight: 400;
				font-size: 30rpx;
				color: #CCCCCC;
			}
		}
		
		.content-input-btn {
			width: 586rpx;
			height: 98rpx;
			padding: 20rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FEC92F;
			background-color: #000;
			text-align: center;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 50rpx;
		}
	}
</style>